<template>
<div class="login-container">
    <div class="login-box">
        <div class="avatar-box">
            <h3>租车后台管理系统</h3>
        </div>
        <el-form :model="formData" status-icon :rules="rules2" ref="formData" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账号" prop="account">
                <el-input type="account" v-model="formData.account" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="formData.password" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="radio">
                <el-radio v-model="formData.status" label="超级管理员">超管</el-radio>
                <el-radio v-model="formData.status" label="普通管理员">普管</el-radio>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</template>

<script>
import api from '../../http/apis/apis';
export default {
    data() {
        var validateAccpunt = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入账号"));
            } else {
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                callback();
            }
        };
        return {
            formData: {
                account: "admin",
                password: "123",
                status: "超级管理员",
            },
            rules2: {
                accpunt: [{
                    validator: validateAccpunt,
                    trigger: "blur"
                }],
                pass: [{
                    validator: validatePass,
                    trigger: "blur"
                }],
            },
        };
    },
    methods: {
        async submitForm() {
            console.info(this.formData)
            const data = await api.adminApi.loginApi(this.formData);
            console.info("data", data)
            console.log(data.data);
            if (data.data.status) {
                this.$message({
                    message: '登录成功',
                    type: 'success',
                });
                const {
                    userInfo,
                    token
                } = data.data.data;
                localStorage.token = token;
                localStorage.userInfo = JSON.stringify(userInfo);
                this.$router.push("/system");
            } else {
                this.$message({
                    message: '登录失败',
                    type: 'warning',
                });
            }

        },

    },
};
</script>

<style lang="scss" scoped>
body,
html {
    height: 100%;
}

.login-container {
    height: 100%;
    width: 100%;
    //    background-image: url("../../assets/img/login.png");
    background-color: black;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;

    .login-box {
        width: 350px;
        height: 300px;
        background-color: #ffffff;
        border: 1px solid #ffffff;
        position: absolute;
        top: 25%;
        left: 35%;
        border-radius: 3px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

        .demo-ruleForm {
            margin-right: 50px;
        }
    }
}
</style>
